<template>
  <div class="home">
    <el-carousel style="margin-bottom: 36px; height: 650px">
      <el-carousel-item
        style="height: 650px"
        v-for="item in bannerList"
        :key="item.id"
      >
        <img
          style="height: 650px; width: 100%"
          :src="item.thumb"
          alt=""
          srcset=""
        />
      </el-carousel-item>
    </el-carousel>
    <div class="container-1200">
      <div class="board flex flex-jc-sp mb-88">
        <div class="board-item left flex">
          <div class="flex flex-fd-c flex-jc-c flex-ai-c">
            <p style="font-size: 32px">{{ boardData.last_month.year }}年</p>
            <p style="font-size: 50px; font-weight: bold">
              {{ boardData.last_month.month }}月
            </p>
          </div>
          <div class="flex flex-jc-c flex-ai-c">
            <div class="flex flex-fd-c">
              <div class="fs-20 color-888 mb-16" style="width: 100%">
                写字楼租金均价
              </div>
              <div class="fs-42 color-000 mb-16" style="width: 100%">
                {{ boardData.last_month.xiezilou_zu
                }}<span class="fs-20">㎡</span>
              </div>
              <div class="fs-20 color-000" style="width: 100%">
                <img
                  v-if="boardData.last_month.xiezilou_zhang > 0"
                  class="icon"
                  src="~@/assets/images/icon_rise.png"
                  alt=""
                />
                <img
                  v-else
                  class="icon"
                  src="~@/assets/images/icon_decline.png"
                  alt=""
                />
                {{ boardData.last_month.xiezilou_zhang }}%
              </div>
            </div>
          </div>
          <div class="flex flex-jc-c flex-ai-c">
            <div class="flex flex-fd-c">
              <div class="fs-20 color-888 mb-16" style="width: 100%">
                厂房租金均价
              </div>
              <div class="fs-42 color-000 mb-16" style="width: 100%">
                {{ boardData.last_month.changfang_zu
                }}<span class="fs-20">㎡</span>
              </div>
              <div class="fs-20 color-000" style="width: 100%">
                <img
                  v-if="boardData.last_month.changfang_zhang > 0"
                  class="icon"
                  src="~@/assets/images/icon_rise.png"
                  alt=""
                />
                <img
                  v-else
                  class="icon"
                  src="~@/assets/images/icon_decline.png"
                  alt=""
                />
                {{ boardData.last_month.changfang_zhang }}%
              </div>
            </div>
          </div>
        </div>
        <div class="board-item right flex">
          <div class="flex flex-fd-c flex-jc-c flex-ai-c">
            <p style="font-size: 32px">{{ boardData.now_month.year }}年</p>
            <p style="font-size: 50px; font-weight: bold">
              {{ boardData.now_month.month }}月
            </p>
          </div>
          <div class="flex flex-jc-c flex-ai-c">
            <div class="flex flex-fd-c">
              <div class="fs-20 color-888 mb-16" style="width: 100%">
                写字楼租金均价
              </div>
              <div class="fs-42 color-000 mb-16" style="width: 100%">
                {{ boardData.now_month.xiezilou_zu
                }}<span class="fs-20">㎡</span>
              </div>
              <div class="fs-20 color-000" style="width: 100%">
                <img
                  v-if="boardData.now_month.changfang_zhang > 0"
                  class="icon"
                  src="~@/assets/images/icon_rise.png"
                  alt=""
                />
                <img
                  v-else
                  class="icon"
                  src="~@/assets/images/icon_decline.png"
                  alt=""
                />
                {{ boardData.now_month.xiezilou_zhang }}%
              </div>
            </div>
          </div>
          <div class="flex flex-jc-c flex-ai-c">
            <div class="flex flex-fd-c">
              <div class="fs-20 color-888 mb-16" style="width: 100%">
                厂房租金均价
              </div>
              <div class="fs-42 color-000 mb-16" style="width: 100%">
                {{ boardData.now_month.changfang_zu
                }}<span class="fs-20">㎡</span>
              </div>
              <div class="fs-20 color-000" style="width: 100%">
                <img
                  v-if="boardData.now_month.changfang_zhang > 0"
                  class="icon"
                  src="~@/assets/images/icon_rise.png"
                  alt=""
                />
                <img
                  v-else
                  class="icon"
                  src="~@/assets/images/icon_decline.png"
                  alt=""
                />
                {{ boardData.now_month.changfang_zhang }}%
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="trading-area mb-88">
        <Title titleStr="核心商圈">
          <div class="flex" slot="control">
            <router-link
              class="flex"
              to="/search"
              style="font-size: 14px; color: #1189d3"
            >
              <span style="margin-right: 8px">查看更多</span
              ><span
                style="
                  width: 15px;
                  height: 15px;
                  text-align: center;
                  line-height: 15px;
                  border: 1px solid #1189d3;
                  border-radius: 99px;
                "
                >+</span
              ></router-link
            >
          </div>
        </Title>
        <div class="flex flex-jc-sp">
          <div
            class="trading-area-item cursor-p"
            v-for="item in businessDistrictList"
            :key="item.id"
            @click="goSearch(item.id, item.region_id)"
          >
            <img :src="item.thumb" alt="" />
            <h3>{{ item.name }}</h3>
          </div>
        </div>
      </div>
      <div class="hot">
        <Title @change="titleChange" :titleArr="titleArr"></Title>
        <List :listData="listData" />
      </div>
      <div class="points cursor-p" @click="goTradingArea(buildList[0].id)">
        <Title :titleStr="buildList[0].name"></Title>
        <Overview :build="buildList[0]" />
      </div>
      <div class="housing">
        <Title titleStr="在租房源" :fontSize="24"></Title>
        <HousingList :buildList="buildList" />
      </div>
      <div class="information">
        <Title titleStr="资讯精选">
          <div class="flex" slot="control">
            <router-link
              class="flex"
              to="/news"
              style="font-size: 14px; color: #1189d3"
            >
              <span style="margin-right: 8px">查看更多</span
              ><span
                style="
                  width: 15px;
                  height: 15px;
                  text-align: center;
                  line-height: 15px;
                  border: 1px solid #1189d3;
                  border-radius: 99px;
                "
                >+</span
              ></router-link
            >
          </div>
        </Title>
        <Information :newsList="newsList" />
      </div>
    </div>
    <FooterIco />
  </div>
</template>

<script>
import Title from '@/components/Title'
import List from '@/components/List'
import Overview from '@/components/Overview'
import HousingList from '@/components/HousingList'
import Information from '@/components/Information'
import FooterIco from '@/components/FooterIco'
import {
  getApiBaseBannerList,
  getApiBaseArticleList,
  getApiStatisticalData,
  getApiRegionList,
  getApiBuildList,
  getApiBaseHouseList,
  getApiBaseIndexBusinessDistrict,
} from '@/api'
export default {
  name: 'Home',
  components: {
    List,
    Overview,
    HousingList,
    Title,
    Information,
    FooterIco,
  },
  data() {
    return {
      titleArr: [
        { label: '热门写字楼', value: 1 },
        { label: '热门厂房', value: 3 },
      ],
      bannerList: [
        {
          id: 1,
          thumb:
            'http://web.zufang.com\\uploads\\admin\\article_thumb\\20201229\\8762046f147b7b5f8c5748114c19e4e6.png',
          create_time: null,
          type: 1,
        },
      ],
      newsList: [],
      boardData: {
        last_month: {
          changfang_zhang: '22',
          changfang_zu: '10',
          id: 1,
          month: '02',
          time: 1612350739,
          xiezilou_zhang: '10',
          xiezilou_zu: '10',
          year: '2021',
        },
        now_month: {
          changfang_zhang: '22',
          changfang_zu: '10',
          id: 1,
          month: '02',
          time: 1612350739,
          xiezilou_zhang: '10',
          xiezilou_zu: '10',
          year: '2021',
        },
      },
      businessDistrictList: [
        {
          id: 1,
          is_top: '1',
          name: '高新园',
          region_id: 3,
          thumb:
            'http://m.huangxh.top/uploads/admin/article_thumb/20210303/37fd1d80bba11f56b01409a728a7b2b3.jpg',
        },
      ],
      buildList: [
        {
          address: '南山粤海大道1号',
          area: '10000',
          cate_id: 1,
          cenggao: '4.2米',
          cengshu: '29',
          content: '',
          hot: '100',
          id: 1,
          is_top: 1,
          is_zu: '10',
          kaifas: '华润',
          keti: '10',
          name: '大冲商务中心',
          price: '10000.00',
          qiye: 'X',
          region_dis_id: 1,
          station: '1号线高新园站20米',
          thumb:
            'http://m.huangxh.top\\uploads\\admin\\article_thumb\\20201113\\e5f4ffc4b73aad7e92896fadb8617b7f.jpeg',
          wuye: '保利物业',
        },
      ],
      listData: {
        total: 0,
        list: [
          {
            id: 1,
            no: 'F0000000000001', //房源编号
            title: '大冲商务中心1', //房源标题
            price: '1999.00', //总价
            area: 1099, //面积
            work_num: '100~200', //工位数
            indec_id: 1, //装修程度id
            address: '南山区粤海大道00001号1号楼1楼', //详细地址
            sale_id: null,
            build_id: 1, //所属楼盘
            feature: '["1","3","4","5","6","7"]',
            content: '房屋特色', //房屋特色
            thumb: '11', //房源图片
            cengshu: '20/50', //层数
            zu_time: -1,
            min_time: -1,
            zhuce: 1, //是否可注册  1是  0否
            cate_id: 1, //类型ID
            run: '100.00', //管理费
            car: '100.00', //停车费
            area_price: '2.00', //单价
            peitao: '周边配套', //周边配套
            is_top: 1,
            region_id: 1, //地区ID
            region_dis_id: 2, //地点ID
            location_feature: '进迪特qqq', //位置特色
            see_house_time: '随时可看', //看房时间
            tiaokuan: '商务条款', //商务条款
            feature_list: [
              //房源特色
              {
                id: 1,
                name: '可注册',
              },
              {
                id: 3,
                name: '带办公家具',
              },
              {
                id: 4,
                name: '热门楼盘',
              },
              {
                id: 5,
                name: '户型方正',
              },
              {
                id: 6,
                name: '免费车位',
              },
              {
                id: 7,
                name: '知名开发商',
              },
            ],
          },
        ],
      },
    }
  },
  created() {
    this.getBannerList()
    this.getArticleCateList()
    this.getStatisticalData()
    this.getRegionList()
    this.getBuildList()
    this.getHouseList(1)
  },
  methods: {
    getBannerList() {
      getApiBaseBannerList({ type: 1 }).then((res) => {
        if (res.code === 200) {
          this.bannerList = res.data
        }
      })
    },
    getArticleCateList() {
      getApiBaseArticleList().then((res) => {
        if (res.code === 200) {
          const data = res.data.list
          data.length = 5
          this.newsList = data
        }
      })
    },
    getStatisticalData() {
      getApiStatisticalData().then((res) => {
        if (res.code === 200) {
          this.boardData = res.data
        }
      })
    },
    getRegionList() {
      getApiBaseIndexBusinessDistrict().then((res) => {
        if (res.code === 200) {
          const data = res.data
          data.length = 4
          this.businessDistrictList = data
        }
      })
    },
    getBuildList() {
      getApiBuildList().then((res) => {
        if (res.code === 200) {
          this.buildList = [
            res.data.list[0],
            res.data.list[1],
            res.data.list[2],
            res.data.list[3],
            res.data.list[4],
          ]
        }
      })
    },
    getHouseList(cate_id) {
      const params = {
        page_number: 1,
        page_size: 10,
        cate_id,
        is_top: 1,
      }
      const user_id = localStorage.getItem('id')
      params.user_id = user_id
      getApiBaseHouseList(params).then((res) => {
        if (res.code === 200) {
          this.listData = {
            total: res.data.total_count,
            list: res.data.list,
          }
        }
      })
    },
    titleChange({ cate_id }) {
      this.getHouseList(cate_id)
    },
    goTradingArea(id) {
      this.$router.push(`/home/tradingArea/${id}`)
    },
    goSearch(id, region_id) {
      this.$router.push(`/search/${id}/${region_id}`)
    },
  },
}
</script>

<style lang="less" scoped>
.home {
  .mb-16 {
    margin-bottom: 16px;
  }
  .mb-88 {
    margin-bottom: 88px;
  }
  .fs-20 {
    font-size: 20px;
  }
  .fs-42 {
    font-size: 42px;
  }
  .color-888 {
    color: #888;
  }
  .color-000 {
    color: #000;
  }
  .board {
    .board-item {
      width: 48.8%;
      height: 182px;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid #eee;
      .icon {
        width: 20px;
        height: 15px;
      }
      & > div:nth-child(1) {
        width: 30%;
        color: #fff;
      }
      div:nth-child(2) {
        width: 40%;
      }
      div:nth-child(3) {
        width: 40%;
      }
    }
    .left {
      & > div:nth-child(1) {
        background-color: #70b6f0;
      }
    }
    .right {
      & > div:nth-child(1) {
        background-color: #f5a482;
      }
    }
  }
  .trading-area {
    .trading-area-item {
      width: 286px;
      height: 217px;
      position: relative;
      border-radius: 6px;
      overflow: hidden;
      h3 {
        font-size: 24px;
        font-weight: bold;
        color: white;
        position: absolute;
        line-height: 1;
        top: 24px;
        left: 24px;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
